import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:mobile_vpn/common/ext/asset_ext.dart';
import 'package:slider_captcha/slider_captcha.dart';

import '../../../router/routers.dart';
import 'register_logic.dart';

class RegisterPage extends StatelessWidget {
  RegisterPage({Key? key}) : super(key: key);

  final RegisterLogic logic = Get.put(RegisterLogic());

  @override
  Widget build(BuildContext context) {


    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, color: Colors.black),
          onPressed: () => Get.back(),
        ),
      ),
      body: Stack(
        children: [
          SingleChildScrollView(
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 32.w),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 40.h),
                  Text(
                    '欢迎注册',
                    style: TextStyle(
                      fontSize: 40.sp,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                  ),
                  SizedBox(height: 8.h),
                  Text(
                    '请输入您的手机号和密码完成注册',
                    style: TextStyle(
                      fontSize: 25.sp,
                      color: Colors.grey,
                    ),
                  ),
                  SizedBox(height: 40.h),
                  _buildPhoneInput(),
                  SizedBox(height: 24.h),
                  _buildCodeInput(),
                  SizedBox(height: 24.h),
                  _buildPasswordInput(),
                  SizedBox(height: 24.h),
                  _buildConfirmPasswordInput(),
                  SizedBox(height: 40.h),
                  _buildRegisterButton(),
                  SizedBox(height: 20.h),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TextButton(
                        onPressed: () {
                          AppRoutes.jumpPage(AppRoutes.loginPage);
                        },
                        child: Text(
                          '已有账号？去登录',
                          style: TextStyle(color: Colors.blue, fontSize: 25.sp),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
          Obx(() => logic.showCaptcha.value
              ? _buildPuzzleCaptchaOverlay()
              : const SizedBox()),
        ],
      ),
    );
  }

  Widget _buildPhoneInput() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '手机号',
          style: TextStyle(
            fontSize: 25.sp,
            color: Colors.black54,
          ),
        ),
        SizedBox(height: 8.h),
        Obx(() => TextField(
          controller: logic.phoneController,
          keyboardType: TextInputType.phone,
          inputFormatters: [
            FilteringTextInputFormatter.digitsOnly,
            LengthLimitingTextInputFormatter(11),
          ],
          onChanged: logic.onPhoneChanged,
          decoration: InputDecoration(
            hintText: '请输入手机号',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12.r),
              borderSide: BorderSide.none,
            ),
            filled: true,
            fillColor: Colors.grey[100],
            errorText: logic.phoneErrorText.value.isNotEmpty
                ? logic.phoneErrorText.value
                : null,
            errorStyle: TextStyle(color: Colors.red, fontSize: 25.sp),
          ),
        )),
      ],
    );
  }

  Widget _buildCodeInput() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              '验证码',
              style: TextStyle(
                fontSize: 25.sp,
                color: Colors.black54,
              ),
            ),
            Obx(() => TextButton(
              onPressed: logic.isRunning.value
                  ? null
                  : () => logic.showPuzzleCaptcha(),
              child: logic.isRunning.value
                  ? Text('${logic.countdown.value} 秒后重试',
                  style: TextStyle(color: Colors.grey))
                  : Text('获取验证码', style: TextStyle(color: Colors.blue)),
            )),
          ],
        ),
        SizedBox(height: 8.h),
        Obx(() => TextField(
          controller: logic.codeController,
          keyboardType: TextInputType.number,
          onChanged: logic.onCodeChanged,
          decoration: InputDecoration(
            hintText: '请输入验证码',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12.r),
              borderSide: BorderSide.none,
            ),
            filled: true,
            fillColor: Colors.grey[100],
            errorText: logic.codeErrorText.value.isNotEmpty
                ? logic.codeErrorText.value
                : null,
            errorStyle: TextStyle(color: Colors.red, fontSize: 25.sp),
          ),
        )),
      ],
    );
  }

  Widget _buildPasswordInput() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '密码',
          style: TextStyle(
            fontSize: 25.sp,
            color: Colors.black54,
          ),
        ),
        SizedBox(height: 8.h),
        Obx(() => TextField(
          controller: logic.passwordController,
          obscureText: !logic.isPasswordVisible.value,
          obscuringCharacter: '*',
          onChanged: logic.onPasswordChanged,
          decoration: InputDecoration(
            hintText: '请输入密码',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12.r),
              borderSide: BorderSide.none,
            ),
            filled: true,
            fillColor: Colors.grey[100],
            suffixIcon: GestureDetector(
              onTap: () {
                logic.isPasswordVisible.toggle();
              },
              child: Icon(
                logic.isPasswordVisible.value ? Icons.visibility : Icons.visibility_off,
                color: Colors.grey,
              ),
            ),
            errorStyle: TextStyle(color: Colors.red, fontSize: 25.sp),
            errorText: logic.passwordErrorText.value.isNotEmpty
                ? logic.passwordErrorText.value
                : null,
          ),
        )),
      ],
    );
  }
  Widget _buildConfirmPasswordInput() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '确认密码',
          style: TextStyle(
            fontSize: 25.sp,
            color: Colors.black54,
          ),
        ),
        SizedBox(height: 8.h),
        Obx(() => TextField(
          controller: logic.confirmPasswordController,
          obscureText: !logic.isConfirmPasswordVisible.value,
          obscuringCharacter: '*',
          onChanged: logic.onConfirmPasswordChanged,
          decoration: InputDecoration(
            hintText: '请再次输入密码',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12.r),
              borderSide: BorderSide.none,
            ),
            filled: true,
            fillColor: Colors.grey[100],
            suffixIcon: GestureDetector(
              onTap: () {
                logic.isConfirmPasswordVisible.toggle();
              },
              child: Icon(
                logic.isConfirmPasswordVisible.value
                    ? Icons.visibility
                    : Icons.visibility_off,
                color: Colors.grey,
              ),
            ),
            errorStyle: TextStyle(color: Colors.red, fontSize: 25.sp),
            errorText: logic.confirmPasswordErrorText.value.isNotEmpty
                ? logic.confirmPasswordErrorText.value
                : null,
          ),
        )),
      ],
    );
  }
  Widget _buildRegisterButton() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 50.w),
      child: ElevatedButton(
        onPressed: () { if (logic.validateRegister()) {
          Get.snackbar('注册成功', '欢迎加入',
              snackPosition: SnackPosition.BOTTOM,
              backgroundColor: Colors.green,
              colorText: Colors.white);
        }},
        style: ElevatedButton.styleFrom(
          backgroundColor: Color(0xFF009FE8),
          minimumSize: Size(double.infinity, 90.h),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(45.r),
          ),
          elevation: 3,
        ),
        child: Text(
          '注册',
          style: TextStyle(
            fontSize: 34.sp,
            fontWeight: FontWeight.w600,
            color: Colors.white,
          ),
        ),
      ),
    );
  }


  Widget _buildPuzzleCaptchaOverlay() {
    return GestureDetector(
      onTap: () => logic.showCaptcha.value = false,
      child: Container(
        color: Colors.black54,
        child: Center(
          child: GestureDetector(
            onTap: () {},
            child: Container(
              width: MediaQuery.of(Get.context!).size.width * 0.8,
              padding: EdgeInsets.all(20.w),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12.r),
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    '安全验证',
                    style: TextStyle(
                      fontSize: 32.sp,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 10.h),
                  Text(
                    '拖动滑块完成拼图验证',
                    style: TextStyle(
                      fontSize: 32.sp,
                      color: Colors.grey,
                    ),
                  ),
                  SizedBox(height: 20.h),
                  SliderCaptcha(
                    image: Image.asset('toutiao'.jpeg,),
                    colorBar: Colors.blue,
                    colorCaptChar: Colors.blue,
                    title: '向右滑动完成验证',
                    onConfirm: (bool success) {
                      if (success) {
                        logic.onCaptchaSuccess();
                      } else {
                        Get.snackbar(' 验证失败', '请重试滑动拼图',
                            snackPosition: SnackPosition.BOTTOM,
                            backgroundColor: Colors.red,
                            colorText: Colors.white);
                      }
                      return Future.value();
                    },
                  ),
                  SizedBox(height: 20.h),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      TextButton(
                        onPressed: () => logic.showCaptcha.value = false,
                        child: Text(
                          '取消',
                          style: TextStyle(color: Colors.grey),
                        ),
                      ),
                      SizedBox(width: 10.w),
                      TextButton(
                        onPressed: () => logic.generateNewCaptcha(),
                        child: Text(
                          '刷新',
                          style: TextStyle(color: Colors.blue),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
